
export const outletCode = `
  // 父路由组件 
  function Team() {
    const [members] = useLoaderData(); // 获取loader数据 
    return (
      <div>
        <TeamHeader />
        <Outlet context={{ members }} /> 
      </div>
    );
  }

  // 子组件获取上下文 
  function MemberDetails() {
    const { members } = useOutletContext();
    return <MemberList data={members} />;
  }
`

export const navigationCode = `
  function SubmitButton() {
    const navigation = useNavigation();
    return (
      <button disabled={navigation.state  === 'submitting'}>
        {navigation.state  === 'submitting' ? '提交中...' : '确认'}
      </button>
    );
  }
`

export const paramsCode = `
  // 路由定义 
  <Route path="/product/:id" element={<ProductDetail />} />
  
  // 组件内获取 
  import { useParams } from 'react-router-dom';
  const { id } = useParams(); // 类型为 string | undefined 
`

export const searchCode = `
  import { useSearchParams } from 'react-router-dom';
 
  // 获取与修改参数 
  const [searchParams, setSearchParams] = useSearchParams();
  const page = searchParams.get('page')  || '1';
  
  // 更新参数（保留其他参数）
  setSearchParams({ ...Object.fromEntries(searchParams),  page: '3' });
`

export const locationCode = `
  // 发送方（导航时）
  navigate('/checkout', {
    state: { 
      cartItems: selectedItems,
      discountCode: 'SAVE2025' 
    }
  });
  
  // 接收方（目标组件）
  import { useLocation } from 'react-router-dom';
  const { state } = useLocation();
  console.log(state?.cartItems);  // 类型安全需自行校验 
`

export const code1 = `
  npm install react-router-dom
  // or
  yarn add react-router-dom
`

export const code2 = `
  // src/router.js

  import { createHashRouter } from 'react-router-dom
  import AppIndex from './App'
  import AllHook from './hook/AllHook'

  /**
   * loader 与 action 函数：在路由配置中直接定义数据加载和表单提交逻辑，支持异步操作。
  */
  const router = createHashRouter([
    {
      path: '/',
      element: <AppIndex />,
      loader: dashboardLoader, // 数据预加载
      action: dashboardAction, // 表单提交处理
      ErrorBoundary: DashboardError, // 专属错误页面
      children: [
        { path: 'allHook', element: <AllHook /> }
      ]
    }
  ])

  export default router
`

export const code3 = `
  // main.js
  import { createRoot } from 'react-dom/client'
  import { RouterProvide } from 'react-router-dom'
  import router from './src/router'

  createRoot(document.getElementById('root')).render(
    <RouterProvide router={router} />
  )
`

export const code4 = `
  const Settings = lazy(() => import('./Settings'));
  <Route 
    path="settings"
    element={
      <Suspense fallback={<Loading />}>
        <Settings />
      </Suspense>
    }
  />
`

export const code5 = `
  {
    path: '/notifications',
    loader: fetchNotifications,
    shouldRevalidate: ({ currentUrl, nextUrl }) => 
      currentUrl.pathname  !== nextUrl.pathname  
  }
`